import React from 'react'
import PropTypes from 'prop-types'
import { projectLabelView as projectDuck } from 'ducks'
import { connect } from 'react-redux'
import ItemTypeButtons from './itemTypeButtons'
import NavButtons from './navButtons'
import ItemsPage from './itemsPage'
import Group from '../group'

class ImageListView extends React.Component {
  static propTypes = {
    initItemPage: PropTypes.func.isRequired,
    match: PropTypes.object.isRequired,
    pageItemsInit: PropTypes.bool.isRequired,
  }

  componentWillMount() {}

  render() {
    const { pageItemsInit } = this.props
    return (
      <Group title="图像列表">
        <div className="label-block label-blSepItems label-h45">
          <div className="label-item label-glrBarItem" style={{ overflow: 'hidden' }}>
            <React.Fragment>
              <NavButtons />
              <ItemTypeButtons />
              <ItemsPage />
            </React.Fragment>
          </div>
        </div>
      </Group>
    )
  }
}

const mapStateToProps = state => ({
  activeListType: '',
  pageItemsInit: projectDuck.selectors.pageItemsInit(state),
  activeItemId: '',
})

const mapDispatchToProps = {
  initItemPage: projectDuck.creators.actionLoadItemPage,
  selectListType: () => {},
  selectItem: () => {},
  prePage: () => {},
  nextPage: () => {},
  firstPage: () => {},
  lastPage: () => {},
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(ImageListView)
